<html>
  <head>
    <title></title>
    <style>
    
      body { flow: grid(1 1,
                        2 3,
                        4 3);
             font:system; }
                   
      body > form { size:*; padding:8dip; }
      
      .table { flow: row(label, select input div textarea button); border-spacing: 6dip;}
      .table > label { padding:4dip; white-space:nowrap; horizontal-align:right; }

      body > div { size:*; }
      textarea#json { size:*; font-family:monospace; font-size:120%; border:1dip solid gray; background:#EFF; display:block; margin-top:2dip; }

      form > textarea { 
        display:block; 
        width:*; 
        height:3.6em;
      }
      
      label[for] { text-decoration:underline; cursor:pointer; }
      
      note { display:block; padding:6dip; margin:6dip; background:#FEE; }
    
    </style>
    <script>
      
      document.on("change","form", function(event,form) {
         console.log(event.target,form.value);
         document.$("textarea#json").value = JSON.stringify(form.value,null,"  "); 

      });

      document.on("click", "button#set", function() {
         const data = JSON.parse(document.$("textarea#json").value);
      });
    
    </script>
  </head>
<body>
  <h2><code>behavior:form</code> demo</h2>
  <form .table>
    <label>dropdownSelect</label>
      <select(dropdownSelect) title="numbers">
        <option>One</option>
        <option>Two</option>
        <option>Three</option>
        <option selected>Four</option>
        <option>Five</option>
        <option>Six</option>
        <option>Seven</option>
        <option>Eight</option>
        <option>Nine</option>
        <option>Ten</option>
        <option>Eleven</option>
        <option>Twelve</option>
      </select>
    
    <label>textarea</label>
      <textarea(textArea) cols=40 rows=4>Sample</textarea>
      
    <label for=textEdit>textEdit</label>
      <input|text(textEdit) value="sample" />
      
    <label>password</label>
      <input|password(passWord) />
      
    <label for=checkboxButton>checkboxButton</label>
      <button|checkbox(checkboxButton) value="checked">Checkbox</button>
  
    <label>radioGroup</label>
      <div>
         <button|radio(radioGroup) value="1" checked>Option 1</button>
         <button|radio(radioGroup) value="2">Option 2</button>
         <button|radio(radioGroup) value="3">Option 3</button>
      </div>
      
    <label>names (sub-group)</label>
    <div.table(names) style="background:#FFD; padding:6dip">
      <label>First:</label><input|text(first) value="My">
      <label>Last:</label><input|text(last) value="Name">
    </div>
    <label>Just a button</label>
    <button>Command</button>
    
  </form>
  <div>
    <button #set>Set values</button>
    <textarea #json></textarea>
  </div>
  <note>
      Note that <code>&lt;form&gt;</code> and its <code>behavior:form</code> supports hierarchical objects: conatiner with <i>name</i> attribute makes sub-object.
      Check yellow container above that has <code>name='names'</code> and two inputs inside.
  </note>  

</body>
</html>
